<template>
  <div class="submission-detail">
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <h3>提交详情</h3>
            <el-tag :type="getScoreType(score)" size="large">
              得分：{{ score }}
            </el-tag>
          </div>
          <div class="header-right">
            <el-button type="primary" @click="goBack">返回</el-button>
          </div>
        </div>
      </template>
      
      <!-- 添加评测结果显示 -->
      <div class="evaluate-container" v-if="evaluate">
        <el-alert
          :title="evaluate"
          :type="getScoreType(score)"
          :closable="false"
          show-icon
        />
      </div>
      
      <div class="code-container">
        <Codemirror
          v-model="code"
          :style="{ height: '500px' }"
          :autofocus="false"
          :indent-with-tab="true"
          :tab-size="2"
          :extensions="extensions"
          readonly
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Codemirror } from 'vue-codemirror'
import { python } from '@codemirror/lang-python'
import { cpp } from '@codemirror/lang-cpp'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'

const route = useRoute()
const router = useRouter()

const code = ref(route.query.code || '')
const score = ref(route.query.score || 0)
const language = ref(route.query.language || 'python')
const evaluate = ref(route.query.evaluate || '') // 添加评测结果

const extensions = computed(() => {
  const langExtension = {
    'python': python(),
    'cpp': cpp(),
    'java': javascript(),
    'javascript': javascript()
  }[language.value] || python()
  
  return [
    langExtension,
    oneDark
  ]
})

const goBack = () => {
  router.back()
}

const getScoreType = (score) => {
  if (score == 100) return 'success'
  if (score == 0) return 'error'
  return 'warning'
}
</script>

<style scoped>
.submission-detail {
  padding: 20px;
}

.detail-card {
  min-height: 600px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-left h3 {
  margin: 0;
}

.evaluate-container {
  margin: 0 20px 20px;
}

.code-container {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

:deep(.cm-editor) {
  height: 100%;
  font-family: 'Fira Code', monospace;
}

:deep(.cm-editor .cm-content) {
  font-size: 14px;
}
</style>